<template>
    <div class="home-mv">
      <h3>新碟上架</h3>
      <div class="wrapper" ref="wrapper">
        <ul class="content" ref="content">
          <li
            v-for="(item, index) in listData"
            :key="index"
            @click="selectItem(item)"
          >
            <div class="cover">
              <van-image :src="item.coverUrl" />
              <!-- <span>{{ item.listen_num | numFilter(1) }}万</span> -->
            </div>
            <span>{{ item.albumName }}</span>
          </li>
        </ul>
      </div>
    </div>
  </template>
  
  <script>
  // import router from "@/router/index.js";
  import { betterScrollHorizontal } from "../../common/betterScroll.js";
  export default {
    data() {
      return {
        listData: [],
      };
    },
    created() {
      this.getSongListData();
    },
    methods: {
      //获取推荐歌单数据
      getSongListData() {
        this.$request("get", "/album/list").then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.listData = res.products;
          }
          //异步数据处理
          // this.betterScrollHorizontal(this.listData.length, 10);
          betterScrollHorizontal(
            this,
            this.$refs.wrapper,
            this.$refs.content,
            this.listData.length,
            10
          );
        });
      },
      selectItem(item) {
        const id = item.albumId;
        // console.log(id);
        //1、编程式导航，带有路径对象
        // this.$router.push({ path: `/songlist/${id}` });
  
        //2、编程式导航，字符串路径对象
        this.$store.dispatch("saveMv", item);
        this.$router.push(`/mvlist/${id}`);
  
        //3、编程式导航，命名的路由，并加上参数，让路由建立url
        // this.$router.push({
        //   name: "songlist",
        //   params: {
        //     id: id, //由于属性和value值得名字一样，所以此语句等同于id
        //   },
        // });
      },
      //滚动封装
      // betterScrollHorizontal(num, itemWidth) {
      //   this.$refs.content.style.width = num * itemWidth + "rem";
      //   this.$nextTick(() => {
      //     this.scroll = new BScroll(this.$refs.wrapper, {
      //       scrollX: true, //打开横向滚动
      //       scrollY: false, //关闭纵向滚动
      //       startX: 0, //横向滚动得开始位置
      //     });
      //   });
      // },
    },
    // filters: {
    //   numFilter(value, num) {
    //     return parseFloat(value / 10000).toFixed(num);
    //   },
    // },
  };
  </script>
  
  <style scoped>
  /* .home-recommend > ul {
    display: flex;
    flex-wrap: wrap;
  }
  .home-recommend > ul > li {
    width: calc((100% - 1rem) / 3 * 1);
  }
  .home-recommend > ul > li:nth-or-type(3n + 2) {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  .cover {
    position: relative;
  }
  .cover > span {
    position: absolute;
    right: 0;
    bottom: 0.4rem;
    background-color: red;
  } */
  .cover {
    position: relative;
  }
  .cover > span {
    position: absolute;
    right: 0.2rem;
    bottom: 0.4rem;
    background-color: #a6a0a0;
    color: white;
    border-radius: 1rem;
    font-size: 14px;
    width: 5rem;
    display: inline-block;
  }
  .wrapper {
    width: 100%; /**容器得宽度就是屏幕得宽度 */
    overflow: hidden;
  }
  /* ul.content {
    width: calc(12 * 10rem);
  } */
  ul.content > li {
    width: 10rem;
    display: inline-block;
    vertical-align: top;
  }
  ul.content > li * {
    margin: 0 0.1rem;
  }
  ul.content > li > span {
    font-size: 0.8rem;
    color: #625858;
  }
  
  </style>
  